<template>
	<view class="shop_page">
		<view class="shop_search">
			<u-search :showAction="false" placeholder="输入门店名称" v-model="keyword"></u-search>
		</view>
		<view class="map">
			<map style="width: 100%; height: 500rpx;" :latitude="latitude" :longitude="longitude" :markers="covers">
			</map>
		</view>
		<view class="shop_list">
			<view class="shop_item" v-for="index  in  4" :key="index">
				<view class="shop_left">
					<view class="shop_title">东方广场店</view>
					<view class="shop_address">广州市天河区珠江西路105号 高德置 地夏广场</view>
				</view>
				<view class="shop_ri" @click="goTo">
					<view class="sel">去下单</view>
					<view class="distance">距离380</view>
					<image @click.native="toMap" class="nav_icon" src="https://img.fy6b.com/2023/02/27/d41ca50d1415f.png">
					</image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [{
				latitude: 39.909,
				longitude: 116.39742,

			}, {
				latitude: 39.90,
				longitude: 116.39,

			}]
		};
	},
	methods: {
		toMap() {
			uni.openLocation({
				latitude: Number(this.latitude), //要去的纬度-地址
				longitude: Number(this.longitude), //要去的经度-地址
				address: '', //要去的具体地址
			});
		},
		goTo() {
			uni.switchTab({
				url: '/pages/category/category'
			});
		}
	}
}
</script>

<style lang="scss" scoped> .shop_page {
 	min-height: 100vh;
 	background-color: #eeeeee;

 	.shop_search {
 		background-color: #fff;
 		padding: 30rpx;
 	}

 	.map {
 		height: 500rpx;
 	}

 	.shop_list {
 		padding: 30rpx;

 		.shop_item {
 			display: flex;
 			justify-content: space-between;
 			background-color: #fff;
 			padding: 40rpx 30rpx;
 			box-sizing: border-box;
 			border-radius: 24rpx;
 			margin-bottom: 30rpx;


 			.shop_left {
 				width: 380rpx;


 				.shop_title {
 					font-size: 32rpx;
 					font-family: PingFang SC;
 					font-weight: 400;
 					color: #222222;
 				}

 				.shop_address {
 					font-size: 24rpx;
 					font-family: PingFang SC;
 					font-weight: 400;
 					color: #999999;
 					margin-top: 31rpx;
 				}
 			}

 			.shop_ri {
 				text-align: center;
 				border-left: 1rpx #eeeeee solid;
 				padding: 0 35rpx 0 65rpx;

 				.sel {
 					font-size: 30rpx;
 					font-family: PingFang SC;
 					font-weight: 500;
 					color: #DC483C;
 				}

 				.distance {
 					font-size: 20rpx;
 					font-family: PingFang SC;
 					font-weight: 300;
 					color: #999999;
 					margin-top: 5rpx;
 				}

 				.nav_icon {
 					margin: auto;
 					width: 46rpx;
 					height: 46rpx;
 					margin-top: 15rpx;
 				}
 			}
 		}
 	}
 }
</style>
